<template>
	<view class="pagesServiceCard">
		<view class="serviceContent">
			<view  class="serviceBox" v-for="(item, index) in serviceArr" :key="index" :class="'color'+index" @click="clickService(item.name)">
				<!-- <view class="serviceBox_box">
					<view class="serviceBox_item">
						{{item.name}}
					</view>
					<view class="serviceBox_dec">
						{{item.dec}}
					</view>
					<image :src="item.icon" class="serviceBox_img" mode="aspectFill" @click="clickservice(item.name)"></image>
					
				</view> -->
				<image :src="item.icon" class="serviceBoxImg" mode="aspectFill" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"pagesServiceCard",
		data() {
			return {
				serviceArr: [
				{
					icon: '/static/images/index/project3.png',
					num: 3,
					name:'特需会诊',
					dec:'知名专家服务'
				}, 
				{
					icon: '/static/images/index/project1.png',
					num: 1,
					name:'普通会诊',
					dec:'普通专家服务'
				}, {
					icon: '/static/images/index/project2.png',
					num: 2,
					name:'项目检测',
					dec:'精准项目检测'
				} ],
			};
		},
		methods:{
			clickService(name) {
				if(name==='特需会诊'){
					uni.navigateTo({
						url:`/subPackages/service/project/project?title=${name}`
					})
				}else if(name==='普通会诊'){
					uni.navigateTo({
						url:`/subPackages/service/project/project?title=${name}`
					})
				}else if(name==='项目检测'){
					uni.navigateTo({
						url:`/subPackages/service/project/project?title=${name}`
					})
					
				}
					
			},
		}
	}
</script>

<style lang="scss" scoped>
.pagesServiceCard{
	.serviceContent{
		display: flex;
		justify-content: space-between;
		// padding-bottom:16rpx;
	}
	.serviceBox{
		width:30%;
		height:220rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		&_box{
			padding:25rpx 0;
		}
		&_img{
			width:80rpx;
			height:80rpx;
			display: block;
			margin:0 auto;
		}
		.serviceBoxImg{
			width:220rpx;
			height:220rpx;
			border-radius: 10rpx;
		}
	}
	// .serviceBox.color0{
	// 	background: linear-gradient( 180deg, #5DDFFA 0%, #1E68E3 100%);
	// }
	// .serviceBox.color1{
	// 	background: linear-gradient( 180deg, #4CE4D5 0%, #0FB6D2 100%);
	// }
	// .serviceBox.color2{
	// 	background: linear-gradient( 180deg, #74ADFE 0%, #7E61EF 99%);
	// }
	.serviceBox_item{
		 font-size:32rpx;
		 font-weight:700;
		 color:#fff;
		 text-align: center;
	}
	.serviceBox_dec{
		font-size:26rpx;
		color:#fff;
	}
}
</style>